<template>
  <i :class="[family, name, buttonIconCls]" ref="icon">{{ unicode }}</i>
</template>
<script lang="ts" setup>
type Unicode = {
  unicode: string
  name?: never
}
type FontClass = {
  unicode?: never
  name: string
}
type Apply = Unicode | FontClass
type Props = Apply & {
  /** @default 'iconfont' */
  family?: string
  /** @default true */
  buttonIcon?: boolean
}
defineOptions({
  name: 'GpFontIcon',
  inheritAttrs: true
})
const { family = 'iconfont', name, unicode, buttonIcon = true } = defineProps<Props>()
const icon = useTemplateRef("icon")
const buttonIconCls = ref("")
onMounted(() => {
  if (buttonIcon && icon.value && icon.value.parentElement?.matches?.('.ant-btn-lg')) {
    buttonIconCls.value = "pr-1"
  }
})
</script>